<template>
  <div>
    <a-row type="flex">
      <a-col flex="1400px">
        <a-input-search class="left-card"
                        v-model="searchObj"
                        placeholder="随便搜搜..."
                        size="large"
                        enter-button
                        @search="onSearch" />
        <div style="width: 1400px;">
          <div style="height: 858px">
            <a-space direction="horizontal" v-for="good in goodList" :key="good.id" style="padding-left: 20px; padding-top: 20px">
              <a-card hoverable style="width: 440px; height: 255px; border-radius: 15px">
                <a-row type="flex">
                  <a-col flex="100px">
                    <img alt="img" :src="good.img" style="width: 100px; height: 100px; border-radius: 10px"/>
                  </a-col>
                  <a-col style="margin-left: 20px; width: 270px; height: 110px; overflow: hidden;">
                    <a-space direction="vertical">
                      <strong>{{good.name}}</strong>
                      <span>
                        <a-icon type="pay-circle" />
                        {{good.price}}
                      </span>
                      <span>购买日期 {{good.purchaseDate}}</span>
                      <a-tooltip>
                        <template slot="title">
                          <span class="goodDescription">{{good.description}}</span>
                        </template>
                        <span class="goodDescription">{{good.description.length > 18 ?  good.description.substring(0, 18) + "...." : good.description}}</span>
                      </a-tooltip>
                    </a-space>
                  </a-col>
                </a-row>
                <a-row style="padding-top: 20px; height: 60px">
                  <div>
                    <a-tag v-for="tag in good.tagList" :key="tag" style="margin-top: 10px">
                      {{tag}}
                    </a-tag>
                  </div>
                </a-row>
                <template slot="actions" class="ant-card-actions">
                <span @click="goodThumbs(good.id)">
                  <a-tooltip>
                    <template slot="title">
                      喜欢
                    </template>
                    <a-icon v-if="!good.hasThumbs" type="heart"/>
                    <a-icon v-if="good.hasThumbs" type="heart" theme="filled" />
                    <span class="actionCount">{{good.thumbs}}</span>
                  </a-tooltip>
                </span>
                <span @click="showMasterInfo(good.masterId)">
                  <a-tooltip>
                    <template slot="title">
                      联系我
                    </template>
                    <a-icon type="user-add" />
                  </a-tooltip>
                </span>
                </template>
              </a-card>
            </a-space>
          </div>
          <a-card style="width: auto; margin-top: 20px; border-radius: 15px">
            <a-pagination
                v-model="page"
                :total="total"
                :show-total="total => `共 ${total} 条`"
                :page-size="pageSize"
                @change="pageChange"
                @showSizeChange="onShowSizeChange"
                slot="extra"
            >
            </a-pagination>
          </a-card>
        </div>

      </a-col>

      <a-col flex="auto" style="padding-left: 20px">

        <a-card class="right-card" title="关于本站" style="height: 200px; border-radius: 15px">
          <p>本站是xxxx学院为了方便同学们提供校内二手物品交易平台</p>
          <p>注意：非校内人员交易需谨慎，为了保险建议线下交易</p>
          <p>希望同学们诚信交易，理智消费</p>
        </a-card>

        <a-card class="right-card" title="热门用户" style="height: 450px; border-radius: 15px">
          <a-list item-layout="horizontal" :data-source="hotUserList">
            <a-list-item slot="renderItem" slot-scope="user">
              <a-list-item-meta :description="user.description.length > 20 ? user.description.substring(0, 20) + '...' : user.description">
                <span slot="title">{{ user.username }}</span>
                <a-avatar slot="avatar" :src="user.avatar"/>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </a-card>

        <a-card class="right-card" title="广告位招租" style="height: 290px; border-radius: 15px">
          <img src="http://picture.treehole.fun/img/202210052048253.jpg" alt="广告位" style="height: 150px" />
        </a-card>

      </a-col>
    </a-row>

    <a-modal v-model="userInfoModal" width="400px" centered :footer="null" >
      <a-row type="flex">
        <a-col flex="110px">
          <a-avatar shape="square" :size="95" :src="userInfo.avatar" />
        </a-col>
        <a-col>
          <a-space direction="vertical" :size="3">
            <strong>{{userInfo.username}}</strong>
            <span>电话 {{userInfo.phone}}</span>
            <span>微信 {{userInfo.wxNum}}</span>
            <span>QQ {{userInfo.qqNum}}</span>
          </a-space>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import {getGoodList, getGoodListByCondition, postGoodThumb} from "@/services/good";
import {getInfoById} from "@/services/user";

export default {
  name: "IndexPage",
  data() {
    return {
      goodList: [], // 商品列表
      hotUserList: [], // 热门用户
      searchObj: "", // 搜索信息
      // 模态窗口用户信息参数
      userInfoModal: false, // 是否显示用户信息模态窗口
      userInfo: {}, // 用户详细信息
      // 分页参数
      total: 0,
      page: 1, // 对局当前页码
      pageSize: 9, // 对局每页显示条数
    }
  },
  mounted() {
    this.fetchGoodList()
    this.getHotUserList()
  },
  methods: {
    fetchGoodList() {
      // 获取商品列表请求
      getGoodList(this.page, this.pageSize).then(res => {
        if (res.code === 20000) {
          this.total = res.data.total
          this.goodList = res.data.goodVoList
        } else {
          console.log(res.message)
        }
      }).catch(() => {
        console.log('获取商品列表请求错误')
      })
    },
    getHotUserList() {
      // TODO 获取热门用户请求
      for (let i = 0; i < 5; i++) {
        this.hotUserList.push({
          id: i,
          username: "张三",
          avatar: "http://picture.treehole.fun/img/202208052141163.jpg",
          description: "大家好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈"
        })
      }
    },
    goodThumbs(goodId) {
      // 点赞/取消点赞请求
      postGoodThumb(goodId).then(res => {
        if (res.code === 20000) {
          for (let i = 0; i < this.goodList.length; i++) {
            if (this.goodList[i].id === goodId) {
              this.goodList[i].thumbs += res.data // 点赞增加或取消
              this.goodList[i].hasThumbs = !this.goodList[i].hasThumbs // 点赞状态设置
            }
          }
        } else if(res.code === 40101) { // 无权限响应码
          this.$message.warning('请先登录')
        } else {
          console.log(res.message)
        }
      }).catch(() => {
        console.log('点赞/取消点赞请求错误')
      })
    },
    showMasterInfo(id) {
      // 发送通过id查询用户信息请求
      getInfoById(id).then(res => {
        if (res.code === 20000) {
          this.userInfo = res.data
          this.userInfoModal = true
        } else {
          console.log(res.message)
        }
      }).catch(() => {
        console.log('查询用户信息请求错误')
      })
    },
    onSearch() {
      // 搜索请求
      this.page = 1 // 搜索结果从第一页开始
      getGoodListByCondition(this.page, this.pageSize, this.searchObj).then(res => {
        if (res.code === 20000) {
          this.total = res.data.total
          this.goodList = res.data.goodVoList
        } else {
          console.log(res.message)
        }
      }).catch(() => {
        console.log('获取商品列表请求错误')
      })
    },
    // 分页方法
    // 每页显示条数变化（这个page变化页数底层用得到）
    onShowSizeChange(page, pageSize) {
      this.page = 1 // 回到第一页
      this.pageSize = pageSize
      this.fetchGoodList()// 查询数据
    },
    // 页码改变
    pageChange(page) {
      this.page = page
      this.fetchGoodList()
    },
  }
}
</script>

<style scoped>
.right-card {
  margin-bottom: 20px;
}
.left-card {
  /*margin-bottom: 20px;*/
}
.goodDescription {
  font-size: small;
  color: rgba(143, 143, 143, 0.96);
}
.actionCount {
  margin-left: 5px
}
</style>
